<template>
  <form-item>
    <el-form-item label="内容">
      <el-input v-model="options.text" placeholder="请输入文字内容"></el-input>
    </el-form-item>
    <el-form-item label="字号">
      <el-input-number
        v-model="options.font.fontSize"
        controls-position="right"
        :step="1"
        placeholder="请输入字号"
      />
    </el-form-item>
    <el-form-item label="行高">
      <el-input-number
        v-model="options.lineHeight"
        controls-position="right"
        :step="0.5"
        :min="1"
        :max="9999"
        placeholder="请输入行数"
      />
    </el-form-item>
    <el-form-item label="行数">
      <el-input-number
        v-model="options.lineNumber"
        controls-position="right"
        :step="1"
        :min="1"
        :max="10"
        placeholder="请输入行数"
      />
    </el-form-item>
    <el-form-item label="缩进">
      <el-input v-model="options.textIndent" placeholder="请输入缩进" />
    </el-form-item>
    <el-form-item label="小型大写">
      <el-radio-group v-model="options.font.fontVariant">
        <el-radio-button label="normal">正常值</el-radio-button>
        <el-radio-button label="small-caps">小型大写</el-radio-button>
      </el-radio-group>
      <el-link type="warning" style="margin-left: 10px">只有英文值生效</el-link>
    </el-form-item>
    <el-form-item label="粗细">
      <el-radio-group v-model="options.font.fontWeight">
        <el-radio-button label="normal">正常值</el-radio-button>
        <el-radio-button label="bold">加粗</el-radio-button>
        <el-radio-button label="bolder">最粗</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="样式">
      <el-radio-group v-model="options.font.fontStyle">
        <el-radio-button label="normal">正常值</el-radio-button>
        <el-radio-button label="italic">斜体</el-radio-button>
        <el-radio-button label="oblique">倾斜</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="字体">
      <el-input
        v-model="options.font.fontFamily"
        placeholder="请输入字体（font-family）"
      ></el-input>
    </el-form-item>
    <el-form-item label="颜色">
      <el-color-picker
        v-model="options.color"
        show-alpha
        :predefine="predefineColors"
      >
      </el-color-picker>
    </el-form-item>
    <el-form-item label="阴影">
      <el-input
        v-model="options.textShadow"
        placeholder="请输入阴影值"
      ></el-input>
    </el-form-item>
    <el-form-item label="对齐方式">
      <el-select v-model="options.textAlign">
        <el-option value="center" label="居中"></el-option>
        <el-option value="left" label="左对齐"></el-option>
        <el-option value="right" label="右对齐"></el-option>
        <el-option value="justify" label="两端对齐"></el-option>
        <el-option value="" label="无"></el-option>
      </el-select>
    </el-form-item>
  </form-item>
</template>

<script>
import common from '../mixin';
export default {
  name: 'WordTool',
  mixins: [common],
  data() {
    return {
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],
      fontObj: {
        font: {
          'font-size': 16,
          'font-variant': 'normal',
          'font-weight': 'normal',
          'font-style': 'normal',
          'font-family': ''
        },
        text: '这是一段默认内容',
        color: 'black',
        textShadow: 'none',
        verticalAlign: 'center',
        textAlign: 'center'
      }
    };
  }
};
</script>
